<template>
	<div class="home-box">
		<!-- 样式组件 -->
		<div class="style-components"
			:class="getStyleComponentsState === 'hide' ? 'style-components-active' : ''"
			:style="getStyleComponentsCoverState ? 'z-index: 2;' : ''">
			<!-- <div>   -->
			<!-- <div v-show="getStyleComponentsState === 'show'" >  -->
			<div :class="getStyleComponentsState === 'show' ? '' : 'style-components-content-active'" >
				<p class="style-components-title">模板组件</p>
				<router-view name="style"></router-view>
			</div>
			<!-- 用来hover显示抽屉的div -->
			<div class="style-components-hover"
				v-show="getStyleComponentsState === 'hide'"
				@mouseover="showStyleComponents">
				<img src="static/image/style-components-hover.png" />
				<span class="text">组件列表</span>
			</div>

		</div>
		<!-- 当抽屉出来的时候，有个遮罩 -->
		<div class="style-components-cover"
			v-show="getStyleComponentsCoverState"
			@click.stop="click2hideStyleComponents"
			:style="`width: ${getWidth()}px; height: ${getHeight()}px`">
		</div>
		<!-- 真实组件 -->
		<div class="background-box">
			<div class="background"></div>
			<div class="container-box">
				<!-- 侧边栏 -->
				<m-aside></m-aside>
				<div class="home-container">
					<!-- <m-header></m-header> -->
					<router-view name="real"></router-view>
        </div>
				<HomeShowImg v-if="getpopupVisible"></HomeShowImg>
			</div>
		</div>
		<!-- 编辑区域 -->
		<div class="edit-content">
			<div class="edit-header">
				<!-- 是否显示手机框 -->
				<div class="showPhone">
					<circle-select
						:state="showPhone"
						:clickEvent="showPhoneEvent"
					>
					</circle-select>
					<span class="showPhone-text">是否显示手机框</span>
				</div>
				<!-- 操作按钮 -->
				<div class="handle-button">
					<blue-button :clickEvent="save"></blue-button>
					<gray-button style="display: none;" class="root-cancel-button" :clickEvent="cancelClickEvent"></gray-button>
					<back-home style="margin-left: 15px;" :clickEvent="backHomeClickEvent"></back-home>
				</div>
			</div>
			<div class="edit-arrow"><img src="static/image/edit-arrow.png" /></div>
			<router-view name="edit"></router-view>
			<div class="edit-footer">

			</div>
		</div>
		<img src="" alt="" ref="preview" />
		<!-- 对话框 -->
		<bg-cover ref="mBgCover">

		</bg-cover>
		<edit-model ref="mEditModel" title="新增模板">
			<div class="add-template-box slot-banner" slot="main">
				<div>
					<p class="eidt-slot-title">
						<span class="required">*</span>模板名称
					</p>
					<input type="text" v-model="tpName"/>
				</div>
				<div>
					<p class="eidt-slot-title">
						<span class="required">*</span>模板描述
					</p>
					<textarea v-model="tpDesc"></textarea>
				</div>
				<div class="fabu-box">
					<blue-button text="确定" :clickEvent="addClickEvent"></blue-button>
				</div>
			</div>
		</edit-model>
		<m-dialog ref="mDialog"></m-dialog>
		<m-toast ref="mToast"></m-toast>
    <add-cart-for-spec></add-cart-for-spec>

  </div>

</template>

<script>
	import { mapGetters, mapActions } from "vuex";
	import BlueButton from "./edit-components/BlueButton";
	import GrayButton from "./edit-components/GrayButton";
	import dialog from "./edit-components/Dialog";
	import SEToast from "./edit-components/Toast";
	import BackHome from "./edit-components/BackHome";
	import CircleSelect from "./edit-components/CirleSelect";
	import { showLoading } from "./utils/loading";
	import { Toast } from "./utils/toast";
	import { MessageBox } from "./ui-components";
	import Aside from "./real-containers/aside";
	import HomeShowImg from "./real-components/HomeShowImg";
	import BgCover from "./edit-components/BgCover";
	import EditModel from "./edit-components/EditModel";
	import deepCopy from "./utils/deepCopy";
	import SGCompress from "./utils/ImgCompress";
	import getMoney from "./real-containers/ConfirmOrder/axios/orderMoney";
	import {getPageNameOrVirtualPageName} from "./utils/getPageName";
	import AddCartForSpec from './real-components/AddCartForSpec/index'
	export default {
		data() {
			return {
				msg: '这是测试首页',
				pickerVisible: new Date(1970, 1, 1),
				activeIndex: 1,
				// tdata: ["", ""],
				showPhone: true,
				tpName: "",
				tpDesc: "",
				//抽屉遮罩的显示状态
				// styleComponentsCoverState: false
			}
		},
		components: {
			"m-dialog": dialog,
			"m-aside": Aside,
			HomeShowImg,
			"blue-button": BlueButton,
			"gray-button": GrayButton,
			"m-toast": SEToast,
			"circle-select": CircleSelect,
			"back-home": BackHome,
			"bg-cover": BgCover,
			"edit-model": EditModel,
			// "mt-datetime-picker": DatetimePicker,
      AddCartForSpec,

		},
		computed: {
			...mapGetters('xxy', [
				"getpopupVisible",
			]),
			...mapGetters([
				// "getConfigParams"
				"getCurrentTemplate",
				"editConfig",
				"getStyleComponentsState",
				"getStyleComponentsCoverState",
			]),
		},
		created() {
			// console.log(this.$store);
		},
		mounted() {
			// this.initHtml2Canvas();
			// let s = new SGCompress();
			getMoney();
			this.resetStyleComponentsStyle();
			// Toast({
			// 	message: "测试用的提示！",
			// 	duration: "1000000000",
			// 	type: "fail"
			// });
		},
		methods: {
			...mapActions([
				"changeEditItem"
			]),
			get(value) {
				// console.log("111111111", value);
			},
			openPicker() {
				this.$refs.picker.open();
			},
			//显示提示框的方法
			infoDialog(msg, confirmFn) {
				this.$refs.mDialog.dialog({
					msg,
					confirmFn
				});
			},
			//显示样式组件的方法
			showStyleComponents() {
				// this.styleComponentsCoverState = true;
				this.$store.commit("setStyleComponentsState", "show");
				this.$store.commit("setStyleComponentsCoverState", true);
			},
			//点击遮罩层就隐藏样式组件
			click2hideStyleComponents() {
				this.$store.commit("setStyleComponentsState", "hide");
				// this.styleComponentsCoverState = false;
				this.$store.commit("setStyleComponentsCoverState", false);
			},
			//显示Toast的方法
			infoToast(msg) {
				this.$refs.mToast.toast(msg);
			},
			save() {
				//判断是否是新增的，如果是，则弹出遮罩层，输入模板名称和模板描述
				if (this.getCurrentTemplate.rid) {
					this.infoDialog("要保存对当前模板所做的更改吗？", this.dialogConfirmEvent.bind(this, "模板保存成功", "模板保存失败"));
				} else {
					//是新增模板，弹出输入名称和描述的框框
					this.$refs.mEditModel.showCover();
				}
			},
			//保存新增模板的方法
			addClickEvent() {
				if (!this.tpName) {
					console.log("请输入模板标题");
					return;
				}
				//更改当前模板参数
				this.$store.commit("setCurrentTemplate", Object.assign({}, this.getCurrentTemplate, {
					tpName: this.tpName,
					tpDesc: this.tpDesc,
				}));
				this.$refs.mEditModel.hideCover();
				this.dialogConfirmEvent("模板新建成功", "模板新建失败");

			},
			//对话框的确定事件
			dialogConfirmEvent(successMsg, failMsg) {
				// console.log(successMsg, failMsg);
				// return;
				//将当前模板的更改保存到数据库中
				let success = (data) => {
					// console.log("successMsg111", successMsg)
					//重新给Vuex里的数据赋值
					this.resetTemplateParams(data);
					//更新副本
					if (this.editConfig.id) {
						// let newCopy = deepCopy(this.getCurrentVDO(this.editConfig.id, getPageNameOrVirtualPageName()));
						// console.log("newCopy", newCopy);
						this.$store.commit("setPageDomItemObjCopy", JSON.stringify(this.$store.getters.getDomTree));
					}
					// console.log(this.editConfig.id)
					//提示用户保存成功
					// console.log("successMsg222", successMsg)
					// console.log("successMsg", successMsg)
					this.infoToast(successMsg);
				}
				let fail = (msg = failMsg) => {
					//提示用户保存失败
					console.log("failMsg", msg)
					this.infoToast(msg);

				}
				this.updateDomTreeToDB(success, fail);
			},
			//返回首页事件，首先判断当前组件是否配置过
			backHomeClickEvent() {
				this.backHome();
			},
			showPhoneEvent() {
				this.showPhone = !this.showPhone;
				let background = document.querySelector(".background");
				let bgBox = document.querySelector(".background-box");
				let containerBox = document.querySelector(".container-box");
				if (this.showPhone) {
					//显示手机边框
					// setTimeout(() => {
						// bgBox.style.transition = "all 0.3s";
						background.style.background = `url("static/image/iphone.png")`;
						bgBox.style.transform = "translateY(0)";
						bgBox.style.height = "600px";
						containerBox.style.border = "unset";
					// }, 0);

				} else {
					//隐藏手机边框
					// setTimeout(() => {
						background.style.background = "#f1f1f1";
						bgBox.style.transform = "translateY(-50px)";
						bgBox.style.height = "620px";
						containerBox.style.border = "1px solid #ddd";
					// }, 0);

				}
			},
			//加载html2canvas
			initHtml2Canvas() {
				if (document.querySelector("script[data-id='html2canvas']")) {
					return;
				}
				let script = document.createElement("script");
				script.onload = () => {
					console.log("Html2Canvas加载完毕");
				}
				script.setAttribute("data-id", "html2canvas");
				script.src = "../static/script/lib/html2canvas.js";
				// script.src = "../static/script/lib/html2canvas.min.js";
				document.body.appendChild(script);
			},
			cancelClickEvent() {
				return;
				console.log("点击了取消按钮");
				//将当前页面上img本地化'
				// let quequ = [];
				Array.prototype.forEach.call(document.querySelectorAll("img"), (item, index) => {
					// console.log(item);
					new SGCompress({
						// img: item
						originSrc: item.src,
						success: (data) => {item.src = data;}
					});
					// item.src = inv.compress();

					// item.src = "static/image/demo2.png";
				});
				setTimeout(() => {
					this.screenshot();
				}, 2000);
			},
			//截屏功能
			screenshot() {
				console.log("开始截屏");
				let self = this;
				html2canvas(document.querySelector(".container-box"), {
					// allowTaint: true,
					// onrendered: function (canvas) {

					// 	// console.log(url);
					// 	// setTimeout(() => {
					// 	// 	console.log("开始设置图像");
					// 	// 	document.querySelector("#box").style.display = "none";
					// 	// 	document.querySelector("#preview").src = url;
					// 	// }, 1000);
					// }
				}).then(canvas => {
					var url = canvas.toDataURL();
					console.log("截屏结束");
					this.$refs.preview.crossOrigin = "anonymous";
					this.$refs.preview.src = url;
				});
			},
			//获得窗口宽度
			getWidth() {
				return window.innerWidth;
			},
			//获得窗口高度
			getHeight() {
				return window.innerHeight;
			},
			//当屏幕dpi小于等于1366px的时候，左侧组件列表变为抽屉式的
			resetStyleComponentsStyle() {
				if (window.innerWidth <= 1366) {	
					console.log("当屏幕dpi小于等于1366px的时候，左侧组件列表变为抽屉式的");
					this.$store.commit("setStyleComponentsState", "hide");
				}
			},
		}
 	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.home-box {
		display: flex;
		height: 100%;
	}

	.container-box {
		position: absolute;
		left: 0;
		top: 0;
		width: 375px;
		height: 100%;
		overflow-x: hidden;
	}

	.home-container {
		overflow-y: auto;
		overflow-x: hidden;
		width: 375px;
		height: 100%;
	}

	.background-box {
		width: 427px;
		position: relative;
		margin-left: 36px;
		margin-top: 60px;
		float: left;
		height: 600px;
		transition: all 0.5s;
	}

	.background {
		/* transition: all 0.5s; */
		position: absolute;
		width: 427px;
		height: 806px;
		background: url("./lib/image/iphone.png");
		left: 0;
		top: 0;
		margin-top: -102px;
		margin-left: -26px;
	}

	.home-box-right {
	}

	.edit-content {
		float: left;
		height: 550px;
		flex: 1;
		border: 1px solid #ddd;
		margin-top: 80px;
		background: #fff;
		position: relative;
		padding: 20px 18px;
		margin-right: 28px;
	}
	.edit-header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 50px;
		background: #fff;
		position: absolute;
		top: -70px;
		left: 0;
		padding: 0 20px;
		box-sizing: border-box;
		align-items: center;
	}
	.edit-header .handle-button {
		display: flex;
	}
	.edit-header .handle-button .root-cancel-button {
		margin: 0 20px 0 10px;
	}

	.edit-header>div:nth-of-type(1) {
		margin-right: 20px;
	}
	.edit-arrow {
		position: absolute;
		left: -11px;
		top: 25px;
	}

	.style-components {
		position: relative;
		border-right: 1px solid #dddddd;
		float: left;
		background: #f5f5f5;
		width: 260px;
		height: 100%;
		padding-top: 22px;
		transition: all 0.3s;
	}

	.style-components-title {
		color: #ff9e13;
		font-weight: bold;
		/* margin-bottom: 22px; */
	}
	.showPhone {
		display: flex;
	}
	.showPhone-text {
		margin-left: 10px;
		font-size: 14px;
	}
	/* 新增框的样式 */
	.slot-banner>div {
		display: flex;
		/* margin-top:  */
		margin-bottom: 10px;
		align-items: center;
	}
	.slot-banner>div input[type=text]{
		width: 60%;
	}
	.slot-banner>div textarea {
		width: 60%;
		resize: none;
		height: 120px;
		border-radius: 3px;
		border: 1px solid #ddd;
	}
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	/* 用来hover显示抽屉的div */
	.style-components-active {
		/* width: 30px; */
		margin-right: 50px;
		/* width: 0; */
		/* transform: translateX(-260px); */
		width: 0;
	}
	.style-components-content-active {
		/* visibility: hidden; */
		opacity: 0;
	}
	.style-components-hover {
		position: absolute;
		top: 45%;
		right: -31px;
		height: 150px;
		width: 30px;
		display: flex;
		align-items: center;
		cursor: pointer;
		/* margin-right: 20px; */
	}
	.style-components-hover img {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		/* z-index: -1; */
	}
	.style-components-hover span {
		display: flex;
		flex-flow: column nowrap;
		height: 100%;
		justify-content: center;
		position: relative;
		z-index: 1;
		color: #fff;
		font-size: 12px;
		padding: 5px;
	}
	.style-components-cover {
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1;
	}

</style>
